<template>
  <van-tabbar
      v-model="active"
      @change="onChange"
      safe-area-inset-bottom
      fixed
      :z-index="9999"
  >
    <van-tabbar-item icon="home-o" name="home">首页</van-tabbar-item>
    <van-tabbar-item name="exercise">
      <template #icon>
        <image
            src="../static/icon/work-break.svg"
            mode="aspectFit"
            style="width: 22rpx; height: 22rpx"
        />
      </template>
      工间操
    </van-tabbar-item>
    <van-tabbar-item name="community">
      <template #icon>
        <image
            src="../static/icon/community.svg"
            mode="aspectFit"
            style="width: 22rpx; height: 22rpx"
        />
      </template>
      社区
    </van-tabbar-item>
    <van-tabbar-item icon="eye-o" name="eye">护眼管理</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="mine">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, watch } from 'vue';

const active = ref('home');

// 同步当前页面
watch(
    () => getCurrentPages()[getCurrentPages().length - 1]?.route,
    (route) => {
      const pageMap = {
        'pages/home/index': 'home',
        'pages/exercise/index': 'exercise',
        'pages/community/index': 'community',
        'pages/eye/index': 'eye',
        'pages/mine/index': 'mine',
      };
      active.value = pageMap[route] || 'home';
    },
    { immediate: true }
);

function onChange(name) {
  const pageMap = {
    home: '/pages/home/index',
    exercise: '/pages/exercise/index',
    community: '/pages/community/index',
    eye: '/pages/eye/index',
    mine: '/pages/mine/index',
  };
  uni.switchTab({ url: pageMap[name] });
}
</script>

<style scoped>
:deep(.van-tabbar) {
  z-index: 9999;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
  background: #fff;
  height: 50rpx;
}
</style>
